<template>
  <div class="home">
    <div>
      <!-- <el-row class="tac">
        <el-col :span="12">
          <el-menu default-active="1-4" router :default-openeds="openeds">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>我的模型</span>
              </template>
                <el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">
                  <span>空间天气模型</span>
                </template>
                <el-menu-item index="user">user input</el-menu-item>
                <el-menu-item index="eval">Evaluation</el-menu-item>
                <el-menu-item index="down">download</el-menu-item>
                <el-menu-item index="plot">plot</el-menu-item>
              </el-submenu>
               </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row> -->
      <el-tree
        class="tree tac"
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openeds: ["1"],
      data: [
        {
          label: "我的模型",
          children: [
            {
              label: "XXX模型",
              children: [
                {
                  label: "user Input",
                  routers: "user",
                },
                {
                  label: "plot",
                  routers: "plot",
                },
                {
                  label: "Evaluation",
                  routers: "eval",
                },
                {
                  label: "download",
                  routers: "down",
                },
              ],
            },
            {
              label: "XXXX模型",
              children: [
                {
                  label: "二级 2-1",
                  children: [
                    {
                      label: "三级 2-1-1",
                    },
                  ],
                },
                {
                  label: "二级 2-2",
                  children: [
                    {
                      label: "三级 2-2-1",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      if (data.routers) {
        if (data.touters != data.routers) {
          this.$router.push(data.routers);
        }
      }
    },

    handleOpen(key, keyPath) {},
  },
};
</script>
<style>
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.el-tree .el-icon-caret-right:before {
  content: "\e783";
  font-size: 18px;
}
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: "\e781";
  font-size: 18px;
}
</style>
<style scoped lang="scss">
::v-deep .el-tree {
  width: 380px;
  border-right: solid 1px #e6e6e6;
  color: #fff;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #3b465b;
  height: 900px;
}
::v-deep .el-tree-node__content:hover {
  color: #ffff;
  background-color: #54a9dd;
}
::v-deep .el-tree-node__content.is-active {
  color: #ffff;
  background-color: #54a9dd;
}
::v-deep .el-menu-item {
  width: 380px;
  height: 620px;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: #2c3449;
  color: white;
}
::v-deep .el-col-12 {
  width: 100%;
}
::v-deep .el-submenu__title:hover {
  background-color: #1c75bc;
  color: #e6e6e6;
}
::v-deep .el-submenu__title {
  width: 380px;
  height: 30px;
  background-color: #1c75bc;
  line-height: 30px;
  font-size: 18px;
  color: #e6e6e6;
}
.home {
  display: flex;
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #1c75bc;
}
.tree {
  /deep/ .el-tree-node__content {
    padding: 0 !important;
  }
  /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  /deep/ .el-tree-node__children {
    padding-left: 60px;
  }

  // 竖线
  /deep/ .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px solid #fff;
  }

  /deep/ .el-tree-node:last-child::before {
    height: 38px;
  }

  // 横线
  /deep/ .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px solid #fff;
  }

  /deep/ & > .el-tree-node::after {
    border-top: none;
  }
  /deep/ & > .el-tree-node::before {
    border-left: none;
  }

  /deep/ .el-tree-node__expand-icon {
    font-size: 16px;
  }
  // /deep/ .is-leaf {
  //   display: none;
  // }
}
</style>
